@import url(./general.css);

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url(../fonts/ms-sans-serif/ms-sans-serif.css);

body {
   background-color: #333;
   box-shadow: 0 0 5rem 2rem #111 inset;
}
body, html {
   padding: 0;
   margin: 0;
}

.hidden {
   display: none !important;
}

#header {
   font-family: 'Abril Fatface';
   background-image: radial-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
   border: 2px solid #000;
   border-radius: 6px;
   padding: 0 1rem;
   margin-left: 50%;
   margin-top: 2rem;
   margin-bottom: 5rem;
   display: table;
   transform: translateX(-50%);
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 5px 5px 5px 5px rgba(0, 0, 0, 0.4);;
}
#header :is(h1, h2) {
   text-align: center;
   margin: 0;
}
#header h1 {
   color: #fff;
   font-size: 2.3rem;
   letter-spacing: 0.1rem;
}
#header h1 span {
   color: rgb(255, 196, 0);
}
#header h2 {
   color: #ddd;
   font-family: "MS Sans Serif";
   font-weight: normal;
   font-size: 1.2rem;
}

#shop {
   width: 50%;
   background-image: radial-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
   border: 2px solid #000;
   border-radius: 6px;
   margin-left: 50%;
   transform: translateX(-50%);
   box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4) inset, 0 0 0 2px rgba(255, 255, 255, 0.2), 5px 5px 5px 5px rgba(0, 0, 0, 0.4);;
}
#shop .title {
   color: #fff;
   font-family: "MS Sans Serif";
   text-align: center;
   margin: 0.3rem 0 1rem;
}